<style>
    .mass-wrap {
        height: 100%;
    }

    .mass-chose {
        border: 1px dashed #e7e7eb;
        text-align: center;
        height: 100%;
        line-height: 220px;
    }

    .mass-chose .mass {
        display: inline-block;
        padding: 20px;
        line-height: 1;
        border: 1px solid #e7e7eb;
        color: #333;
        margin-right: 20px;
    }

    .mass-chose .mass:last-child {
        margin-right: 0;
    }

    .mass-chose .mass:hover {
        background: #f4f6f9;
        color: #428bca;
    }

    .mass-chose .iconfont {
        margin-right: 10px;
    }

    .mass-show {
        height: 100%;
    }

    .media-list .item {
        border: 1px solid #ccc;
    }

    .mass-show .wxmp-list-justify .item {
        border: 1px solid #ccc;
        height: 250px;
    }

    .mass-show .layui-btn-danger {
        position: absolute;
        bottom: 10px;
        left: 50%;
    }

    .icon-show-wrap {
        padding: 20px;
    }

    .icon-show-wrap p {
        margin-top: 20px;
    }

    .icon-show-block {
        display: inline-block;
        width: 80px;
        height: 80px;
        text-align: center;
        line-height: 80px;
        font-size: 40px;
        border: 1px solid #dedede;
    }

    .checked.icon-right-1 {
        display: none;
        position: absolute;
        width: 100%;
        height: 100%;
        top: 0;
        left: 0;
        text-align: center;
        line-height: 250px;
        background: rgba(0, 0, 0, .6);
        color: #fff;
        font-size: 100px;
    }

    li.active .checked.icon-right-1 {
        display: block;
    }

    .wxmp-list-image .checked.icon-right-1 {
        line-height: 170px;
    }
</style>
<div class="sm-rightPanel">
    <div class="layui-anim layui-anim-upbit">
        <blockquote class="site-text layui-elem-quote">
            群发消息
        </blockquote>
        <div class="layui-tab" lay-filter="mass">
            <ul class="layui-tab-title">
                <li class="layui-this" data-type='mpnews'>图文</li>
                <li data-type='image'>图片</li>
                <li data-type='voice'>音频</li>
                <li data-type='mpvideo'>视频</li>
                <li data-type='text'>文本</li>
            </ul>
            <div id="mass_content" class="layui-tab-content"
                 style="border: 1px solid #dedede;height: 260px;position: relative;top:-1px;padding: 20px;">
                <!--图文-->
                <div class="layui-tab-item mass-wrap layui-show" id="item_tuwen">
                    <div class="mass-chose">
                        <a class="mass" href="javascript:void(0);" data-chose="single">
                            <i class="iconfont icon-doc"></i>选择单图文
                        </a>
                        <a class="mass" href="javascript:void(0);" data-chose="multiple">
                            <i class="iconfont icon-doc"></i>选择多图文
                        </a>
                        <a class="mass" href="/views/index.html#/wx/material/document/addsingle">
                            <i class="iconfont icon-doc"></i>新建单图文
                        </a>
                        <a class="mass" href="/views/index.html#/wx/material/document/addmultiple">
                            <i class="iconfont icon-doc"></i>新建多图文
                        </a>
                    </div>
                    <div class="mass-show" style="display: none;">
                        <ul class="wxmp-list-justify media-list">
                        </ul>
                        <button class="layui-btn layui-btn-danger">
                            <i class="iconfont icon-delete"></i>删除
                        </button>
                    </div>
                </div>
                <!--图片-->
                <div class="layui-tab-item mass-wrap" id="item_image">
                    <div class="mass-chose">
                        <a class="mass" href="javascript:void(0);" data-chose="image">
                            <i class="iconfont icon-doc"></i>选择图片
                        </a>
                        <a class="mass" href="/views/index.html#/wx/material/image/image">
                            <i class="iconfont icon-doc"></i>新建图片
                        </a>
                    </div>
                    <div class="mass-show" style="display: none;">
                        <ul class="wxmp-list-image">
                        </ul>
                        <button class="layui-btn layui-btn-danger">
                            <i class="iconfont icon-delete"></i>删除
                        </button>
                    </div>
                </div>
                <!--音频-->
                <div class="layui-tab-item mass-wrap" id="item_audio">
                    <div class="mass-chose">
                        <a class="mass" href="javascript:void(0);" data-chose="audio">
                            <i class="iconfont icon-doc"></i>选择音频
                        </a>
                        <a class="mass" href="/views/index.html#/wx/material/audio/audio">
                            <i class="iconfont icon-doc"></i>新建音频
                        </a>
                    </div>
                    <div class="mass-show" style="display: none;">
                        <div class="icon-show-wrap">
                            <i class="iconfont icon-fileaudio icon-show-block"></i>
                            <p></p>
                        </div>
                        <button class="layui-btn layui-btn-danger">
                            <i class="iconfont icon-delete"></i>删除
                        </button>
                    </div>
                </div>
                <!--视频-->
                <div class="layui-tab-item mass-wrap" id="item_video">
                    <div class="mass-chose">
                        <a class="mass" href="javascript:void(0);" data-chose="video">
                            <i class="iconfont icon-doc"></i>选择视频
                        </a>
                        <a class="mass" href="/views/index.html#/wx/material/video/video">
                            <i class="iconfont icon-doc"></i>新建视频
                        </a>
                    </div>
                    <div class="mass-show" style="display: none;">
                        <div class="icon-show-wrap">
                            <i class="iconfont icon-shipin icon-show-block"></i>
                            <p></p>
                        </div>
                        <button class="layui-btn layui-btn-danger">
                            <i class="iconfont icon-delete"></i>删除
                        </button>
                    </div>
                </div>
                <!-- 文本 -->
                <div class="layui-tab-item mass-wrap layui-form-text" id="item_text">
                    <div class="layui-input-block" style="margin-left: 0;">
                        <textarea style="height: 200px;" placeholder="请输入内容" class="layui-textarea"
                                  id="text-area"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div id="list_form" class="layui-form sm-operation">
            <blockquote class="site-text layui-elem-quote">
                <div class="layui-form-item">
                    <div class="layui-inline">
                        <label class="layui-form-label">群发对象：</label>
                        <div class="layui-input-inline">
                            <select id="target" name="target" lay-filter="userState">
                                <option value="all">全部用户</option>
                                <option value="tag">按标签选择</option>
                            </select>
                        </div>
                    </div>
                    <div class="layui-inline" id="tag_select" lay-filter="tagState" style="display: none;">
                        <div class="layui-input-inline">
                            <select name="tag" id="tagsel">
                            </select>
                        </div>
                    </div>

                    <div class="layui-inline">
                        <label class="layui-form-label">性别：</label>
                        <div class="layui-input-inline">
                            <select name="sex" id='sexsel'>
                                <option value="0" selected>全部</option>
                                <option value="1">男</option>
                                <option value="2">女</option>
                            </select>
                        </div>
                    </div>


                    <!--<div class="layui-inline">-->
                    <!--<button class="layui-btn" id="query"><i class="iconfont icon-sousuo"></i>群发</button>-->
                    <!--</div>-->
                </div>
                <!--             <div class="layui-form-item">
                                <div class="layui-inline">
                                    <label class="layui-form-label">发送时间：</label>
                                    <div class="layui-input-inline">
                                        <select id="time_type" name="time_type" lay-filter="time_type">
                                            <option value="0">实时发送</option>
                                            <option value="1">定时发送</option>
                                        </select>
                                    </div>
                                </div>

                                <div class="layui-inline">

                                    <div class="layui-input-inline" id="ptime" style="display: none;">
                                        <input name="time" id="time" type="text" autocomplete="off" placeholder="时间"
                                               class="layui-input">
                                    </div>
                                </div>
                            </div> -->

            </blockquote>
        </div>
        <div class="layui-btn-container">
            <button id="btn_save" class="layui-btn" style="margin-top: 20px;margin-left: 200px;width: 300px;">群发
            </button>
        </div>
    </div>
</div>
<script>
    layui.use(['layer', 'form', 'laydate', 'element', 'table'], function () {

        var form = layui.form;
        var layer = layui.layer;
        var table = layui.table;
        var laydate = layui.laydate;
        var element = layui.element;

        var massType = 'mpnews';//默认是图文类型

        form.render();

        // 切换群发对象
        form.on('select(userState)', function (data) {
            if (data.value == "all") {
                $("#tag_select").hide();
            } else {
                $("#tag_select").show();
            }
        });
        // 发送时间
        /*form.on('select(time_type)', function (data) {
         if (data.value == "0") {
         $("#ptime").hide();
         } else {
         $("#ptime").show();
         }
         }); */

        //日期时间选择器
        /* laydate.render({
         elem: '#ptime_input'
         , type: 'datetime'
         }); */
        $.ajax({
            url: '/massSend/tagAll',
            dataType: 'json',
            success: function (result) {
                if (result.success) {
                    var dataList = result.data;
                    console.log(dataList);
                    if (dataList) {

                        var opts = '';
                        for (var i = 0; i < dataList.length; i++) {

                            opts += "<option value=" + dataList[i].tagId + ">" + dataList[i].name + "</option>";
                        }
                        $("#tagsel").append(opts);
                        form.render('select');//数据标签更新渲染
                    }
                }
            },
            error: function () {
                console.log("获取标签错误");
            }
        })

        element.render('tab');


        // 开启选择
        $("#mass_content").on("click", "a[data-chose]", function () {
            var type = $(this).attr("data-chose");
            if (type == "single") {
                smartAui.dialog({
                    title: '选择',
                    template: 'single',
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var $item = $(".sm-pop li.active");
                        if ($item.length == 0) {
                            layer.msg("请选择");
                            return;
                        }
                        else {
                            $item.removeClass("active");
                            $("#item_tuwen").attr("data-id", $item.attr("data-id"));
                            $("#item_tuwen .mass-chose").hide()
                                .siblings().show();
                            $("#item_tuwen .media-list").html($item[0].outerHTML);
                            layer.closeAll();
                        }
                    }
                });
                return;
            }
            if (type == "multiple") {
                smartAui.dialog({
                    title: '选择',
                    template: 'multiple',
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var $item = $(".sm-pop li.active");
                        if ($item.length == 0) {
                            layer.msg("请选择");
                            return;
                        }
                        else {
                            $item.removeClass("active");
                            $("#item_tuwen").attr("data-id", $item.attr("data-id"));
                            $("#item_tuwen .mass-chose").hide()
                                .siblings().show();
                            $("#item_tuwen .media-list").html($item[0].outerHTML);
                            layer.closeAll();
                        }
                    }
                });
                return;
            }
            if (type == "image") {
                smartAui.dialog({
                    title: '选择',
                    template: 'image',
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var $item = $(".sm-pop li.active");
                        if ($item.length == 0) {
                            layer.msg("请选择");
                            return;
                        }
                        $item.removeClass("active");
                        $("#item_image").attr("data-id", $item.attr("data-id"));
                        $("#item_image .mass-chose").hide()
                            .siblings().show();
                        $("#item_image .wxmp-list-image").html($item[0].outerHTML);
                        layer.closeAll();
                    }
                });
                return;
            }
            if (type == "audio") {
                smartAui.dialog({
                    title: '选择',
                    template: 'audio',
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var data = table.checkStatus('list_table').data;//已选中数据
                        if (data.length != 1) {
                            layer.msg("请选择一条");
                            return;
                        }
                        data = data[0];
                        $("#item_audio").attr("data-id", data.id)
                            .find(".icon-show-wrap p").text(data.title);
                        $("#item_audio .mass-chose").hide()
                            .siblings().show();
                        layer.closeAll();
                    }
                });
                return;
            }
            if (type == "video") {
                smartAui.dialog({
                    title: '选择',
                    template: 'video',
                    width: 1100,
                    height: 600,
                    yes: function () {
                        var data = table.checkStatus('list_table').data;//已选中数据
                        if (data.length != 1) {
                            layer.msg("请选择一条");
                            return;
                        }
                        data = data[0];
                        $("#item_video ").attr("data-id", data.id)
                            .find(".icon-show-wrap p").text(data.title);
                        $("#item_video .mass-chose").hide()
                            .siblings().show();
                        layer.closeAll();
                    }
                });
                return;
            }
        })
        // 删除
            .on("click", ".layui-btn-danger", function () {
                $(this).parents(".mass-show").hide().siblings().show().parent().removeAttr("data-id");
            });

        // tab 切换重置
        element.on('tab(mass)', function () {

            massType = $(this).attr('data-type');//设置被选择的消息类型
//            console.log(massType);
//            $(".mass-chose").show().removeAttr().siblings().hide();
//            $(".layui-tab-item").removeAttr("data-id");
        });

        // 标签
        smartAui.initSelect({
            elem: "#tag",
            url: "/userTag/listForPage?pageSize=200",
            field: ["id", "name"],   //TODO:标签取哪个字段自己挑
        });

        // 提交
        $("#btn_save").click(function () {
            var $active = $(".layui-tab-item.layui-show");
            // 选中资源id 
            var id = $active.attr("data-id");
            if (massType != 'text') {

                if (!id) {
                    layer.msg("请选择素材！");
                    return;
                }
            }
            var type = $active.attr("id");
            // 只做了判断，需要加类型变量在里边改
            /* switch (type) {
             case "item_tuwen" :
             break;// 图文
             case "item_image" :
             break;// 图片
             case "item_audio" :
             break;// 音频
             case "item_video" :
             break;// 视频
             } */
            var target = $("#target").val();// 对象all或者tag
            var tag = $("#tagsel").val();// 标签
            var sex = $("#sexsel").val();// 性别
            var content = $("#text-area").val();
            if (target == 'tag' && !tag) {
                layer.msg("请选择标签！");
                return;
            }
            if (massType == 'text' && !content) {
                layer.msg("填写文本！");
                return;
            } else if (massType == 'text' && content) {
                id = content;
            }

            /* var time_type=$("#time_type").val();
             var time=$("#time").val();

             if(time_type==1 && !time){
             layer.msg("请选择时间！");
             return;
             } */
            smartAui.ajax({
                loading: true,
                url: '/massSend/sendToMass',
                type: 'POST',
                data: {
                    type: massType,
                    sourceId: id,
                    tarGet: target,
                    sex: sex,
                    tag: tag
                },
                dataType: 'json',
                success: function (result) {
                    if (result.success) {
                        layer.alert("群发成功", function () {
                            window.location.reload();
                        });
                    } else {
                        layer.msg(result.msg || "操作异常");
                    }
                },
                error: function (e) {
                    layer.msg("群发异常");
                    layer.closeAll('loading');
                }
            })

        });
    });
</script>
